<div class="heros">
  <div class="card">
    <div class="card-body">
      <form>
        <div class="row">
          <div class="col">
            <input type="text" [(ngModel)]="searchParams.name" name="name" class="form-control" placeholder="姓名" />
          </div>
          <div class="col">
            <select [(ngModel)]="searchParams.job" class="form-control" name="job">
              <option value="">职业</option>
              <option value="0">法师</option>
              <option value="1">战士</option>
              <option value="2">刺客</option>
              <option value="3">射手</option>
              <option value="4">坦克</option>
            </select>
          </div>
          <div class="col">
            <select name="sort" class="form-control" [(ngModel)]="searchParams.sort">
              <option value="desc">降序</option>
              <option value="asc">升序</option>
            </select>
          </div>
          <div class="col">
            <button class="btn btn-primary" type="button" (click)="search()">搜索</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <button type="button" class="btn btn-primary btn-add">新增</button>
  <div class="card">
    <div class="card-body">
      <table class="table table-striped table-hover text-center" *ngIf="heros.length else empty">
        <thead>
          <tr>
            <th scope="col">姓名</th>
            <th scope="col">性别</th>
            <th scope="col">年龄</th>
            <th scope="col">职业</th>
            <th scope="col">邮箱</th>
            <th scope="col">创建时间</th>
            <th scope="col">简介</th>
            <th scope="col">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of heros">
            <th scope="row">{{ item.name }}</th>
            <th>{{ item.genderText }}</th>
            <th>{{ item.age }}</th>
            <td>{{ item.jobText }}</td>
            <td>{{ item.email }}</td>
            <td>{{ item.createTime }}</td>
            <td>{{ item.brief }}</td>
            <td class="actions">
              <button type="button" class="btn btn-primary btn-modify">修改</button>
              <button type="button" class="btn btn-danger">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
      <ng-template #empty>
        <p class="text-center">empty</p>
      </ng-template>
    </div>
  </div>
</div>